import react from "react";

import MsgBox from "../../msgBox/msgBox"
import "./item.css"

class Item extends react.Component{

    state = {
        mouse : false
    }

    handleMouse = (flag)=>{
        return ()=>{
            this.setState({
                mouse: flag
            })
        }
    }

    handleCheck = (id)=>{
        return (event)=>{
            this.props.updateTodo(id,event.target.checked);
        }
    }

    handleDelete = async (todo)=>{
        const result = await MsgBox({
            title: '提示',
            content: '确定要删除 ' + todo.name + ' 吗？',
            okText: '确定',
            cancelText: '取消',
          });
      
        if (result) this.props.deleteTodo(todo.id);
    }

    render(){
        const {todo} = this.props;
        const {mouse} = this.state;
        console.log(todo);
        return (
            <li className="item" onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)}>
                <label className="label">
                    <input type="checkBox" checked = {todo.done} onChange={this.handleCheck(todo.id)}></input>
                    <span className="content">{todo.name}</span>
                </label>
                <button onClick={ ()=>{this.handleDelete(todo)} }  className="deleteButton" style={{display: mouse ? 'block' : 'block'}}>删除</button>
            </li>
        )
    }
}

export default Item;